<template>
  <div class="box">
    <p class="char">{{this.text}}</p>
  </div>
</template>
<script>
import gasp from "gsap";
import TweenMax from "gsap";
import Script from "../assets/js/script";
export default {
  inject: ["reload"],
  name: "Intro",
  data() {
    return {
      text:
        "我希望有个如你一般的人，如山间清爽的风，如古城温暖的阳光。从清晨到夜晚，由山野到书房。只要最后是你，就好。"
    };
  },
  mounted() {
    this.play();
  },
  methods: {
    play() {
      var text = $(".char");

      var split = new SplitText(text);

      function random(min, max) {
        return Math.random() * (max - min) + min;
      }

      $(split.chars).each(function(i) {
        TweenMax.from($(this), 2.5, {
          opacity: 0,
          x: random(-500, 500),
          y: random(-500, 500),
          z: random(-500, 500),
          scale: 0.1,
          delay: i * 0.02,
          yoyo: true,
          repeat: -1,
          repeatDelay: 10
        });
      });
    }
  }
};
</script>
<style scoped>
.box {
  max-width: 70vw;
  padding: 30px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  font-size: 30px;
  line-height: 1.5;
  transform: translateY(-50%);
  perspective: 400px;
}

.source {
  color: skyblue;
  margin: 0 auto;
}
.char {
  font: 18px large;
  font-family: "Microsoft YaHei";
}
</style>